<template>
	<view>
		<!--基础信息-->
		<view class="btName">基础信息</view>
		<view class="flex-white-plr26 ptb20 mt32 bdb_f5" @click="selectSupplierFun">
			<text class="mr26">相关供应商
				<text class="redXingh">*</text>
			</text>
			<view :class="supplier_name ? '' : 'cBlack'">
				{{supplier_name ? supplier_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>

		<view @click="pickerSelectFun('单据类型')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">单据类型</text>
			<view :class="bus_type_name ? '' : 'cBlack'">
				{{bus_type_name ? bus_type_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="glOrderFun">
			<text class="mr26">关联单据</text>
			<view :class="bus_name ? '' : 'cBlack'">
				{{bus_name ? bus_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">开票金额
				<text class="redXingh">*</text>
			</text>
			<u-input v-model="money" input-align="right" placeholder="请输入开票金额" />
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">开票日期<text class="redXingh">*</text></text>
			<picker mode="date" :value="handle_date" start="1999-02-15" end="2100-02-15" @change="bindDateChange">
				<view v-if="handle_date" class="w420">{{handle_date}}</view>
				<view v-else style="color: #c5c5c5;">请选择开票日期</view>
			</picker>
			<u-icon class="ml26" name="calendar" size="40" color="#888888"></u-icon>
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">开票期次</text>
			<u-input v-model="stages" input-align="right" placeholder="请输入开票期次" />
		</view>
		<view class="flex-white-plr26-column ptb20 ">
			<view style="margin-bottom: 8rpx;">
				<text>备注</text>
			</view>
			<u-input v-model="remark" type="textarea" :border="true" :height="100" :auto-height="true" />
		</view>
		
		<!--开票信息-->
		<view class="btName">开票信息</view>
		<view @click="pickerSelectFun('发票类型')" class="flex-white-plr26 ptb20 bdb_f5 mt32">
			<text class="mr26">发票类型
				<text class="redXingh">*</text>
			</text>
			<view :class="invoice_type ? '' : 'cBlack'">
				{{invoice_type ? invoice_type : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">发票编号<text class="redXingh">*</text></text>
			<u-input v-model="invoice_no" input-align="right" placeholder="请输入发票编号" />
		</view>
		<view @click="pickerSelectFun('抬头类型')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">抬头类型
				<text class="redXingh">*</text>
			</text>
			<view :class="name_type ? '' : 'cBlack'">
				{{name_type ? name_type : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">抬头名称</text>
			<u-input v-model="name" input-align="right" placeholder="请输入抬头姓名/公司名称" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">识别号</text>
			<u-input v-model="credit_code" input-align="right" placeholder="请输入抬头公司识别号" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">开户行</text>
			<u-input v-model="bank_name" input-align="right" placeholder="请输入开户行银行名称" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">开户帐号</text>
			<u-input v-model="bank_account" input-align="right" placeholder="请输入开户行开户帐号" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">开户地址</text>
			<u-input v-model="invoice_address" input-align="right" placeholder="请输入开户行开户地址" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">开票电话</text>
			<u-input v-model="mobile" input-align="right" placeholder="请输入开户行开户电话" />
		</view>
		
		<!--快递地址-->
		<view class="btName">快递信息</view>
		<view class="flex-white-plr26 ptb10 bdb_f5 mt32">
			<text class="mr26">快递名称</text>
			<u-input v-model="express_name" input-align="right" placeholder="请输入发票快递名称" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">快递单号</text>
			<u-input v-model="express_no" input-align="right" placeholder="请输入发票快递单号" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">收件人</text>
			<u-input v-model="express_linkman" input-align="right" placeholder="请输入发票快递收件人" />
		</view>
		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">收件电话</text>
			<u-input v-model="express_mobile" input-align="right" placeholder="请输入发票快递收件电话" />
		</view>
		<view class="flex-white-plr26 ptb10  ptb20">
			<text class="mr26">收件地址</text>
			<u-input v-model="express_address" input-align="right" placeholder="请输入发票快递收件地址" />
		</view>
		
		<view class=""></view>
		
		<!--提交按钮-->
		<view class="submitView">
			<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#909399" @click="submitBtn">
				{{pageType ? '保存' : '提交'}}
			</u-button>
		</view>
		<!--组件-->
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
	</view>
</template>

<script>
	let that = ''
	import {
		getDayFun,
		getNowDate
	} from '@/utils/date.js'
	import {
		apiFinInvoiceRece,apiFinBankAccount,apiCstDict
	} from '@/api/crm.js'
	export default {
		data() {
			return {
				selectShow: false,
				selectList: [],
				bank_account:[],
				cstDict:[],
				rece_record_no: '',

				bus_type: '',
				bus_type_name:'',
				bus_id: '',
				bus_name: '',
			supplier_name: '',
			supplier_id: '',
				handle_date: '',
				stages: '',
				money: '',
				remark: '',
				// 发票信息
				invoice_type:'',
				invoice_no:'',
				name_type:'',
				name:'',
				credit_code:'',
				bank_name:'',
				bank_account:'',
				invoice_address:'',
				mobile:'',
				//快递信息
				express_name:'',
				express_no:'',
				express_linkman:'',
				express_mobile:'',
				express_address: '',
		
				owner_user_id: uni.$userInfo.id,
				create_user_id: uni.$userInfo.id,
				xgInfoObj: {},
				pageType: ''
			}
		},
		onLoad(e) {
			that = this;
			if (e.type == 'update') {
				that.setDataFun();
				that.pageType = 'update';
				uni.setNavigationBarTitle({
					title: '修改收票信息'
				})
			}
			if (e.supplier_name) {
				that.supplier_name = e.supplier_name;
			}
			if (e.supplier_id) {
				that.supplier_id = e.supplier_id;
			}
			
			that.getCstDict();
			
			uni.$on('supplierBindFun', that.supplierBindFun)
			uni.$on('glOrderBindFun', that.glOrderBindFun)
		},
		onBackPress() {
			uni.$off('supplierBindFun', that.supplierBindFun)
			uni.$off('glOrderBindFun', that.glOrderBindFun)
		},
		methods: {
			// 展示相应数据选择框
			pickerSelectFun: function(str) {
				if (str == '发票类型') {
					that.selectList = [
						{value: 0,label: '增值税专用发票'},
						{value: 1,
							label: '增值税普通发票'
						},
						{
							value: 2,
							label: '收据'
						}
					]
				} else if (str == '抬头类型') {
					that.selectList = [{
							value: 0,
							label: '企业'
						},
						{
							value: 1,
							label: '个人'
						}
					]
		} else if (str == '单据类型') {
			that.selectList = [
				{value: 'pos_contract', label: '采购合同'}
			]
			}

			that.selectShow = true;
			that.selectType = str;
			},
			// 选择框选中事件
			selectConfirmFun: function(e) {				
			
				if (that.selectType == '发票类型') {
					that.invoice_type = e[0].label;
				} else if (that.selectType == '抬头类型') {
					that.name_type = e[0].label;
				} else if (that.selectType == '单据类型') {
					that.bus_type = e[0].value;
					that.bus_type_name = e[0].label;
				}else if (that.selectType == '业务类型') {
					that.bustype = e[0].label;
				}
				
				console.log(that.bus_type);
				
			},
			//选择时间绑定
			bindDateChange: function(e) {
				that.handle_date = e.detail.value;
			},
			// 选择所属供应商
			selectSupplierFun: function() {
				uni.navigateTo({
					url: '../sup_supplier/show?type=fin_rece_record'
				})
			},
			// 绑定供应商
			supplierBindFun: function(e) {
				console.log(e)
				if (that.supplier_id != '' && that.supplier_id != e.supplier_id) {
					that.bus_id = '';
					that.money = '';
				}
				that.supplier_id = e.supplier_id;
				that.supplier_name = e.supplier_name;
			},
			// 关联单据方法
			glOrderFun: function() {
				if (!that.supplier_id) {
					uni.$myModalFun('请先关联相关供应商！')
					return
				}
				if (!that.bus_type) {
					uni.$myModalFun('请先选择关联单据类型！')
					return
				}
				if (that.bus_type == 'pos_contract') {
					uni.navigateTo({
						url: '../pos_contract/show?type=rece_record&supplier_id=' + that.supplier_id
					})
				}
			},
			// 关联单据回调绑定函数
			glOrderBindFun: function(e) {
				that.bus_id = e.bus_id;
				if (that.bus_type == 'pos_contract') {
					that.bus_id = e.id;
					that.bus_name = e.name;
					that.money = e.money-e.invoice_money;//总金额-开票金额
				} 
			},
			// 新建或修改回款计划
			submitBtn: function() {
					if (!that.supplier_id) {
						uni.$myModalFun('相关供应商不能为空，请选择！')
						return
					}
				if (that.money == '') {
					uni.$myModalFun('发票金额不能为空，请输入！');
					return
				}
				if (that.invoice_no == '') {
					uni.$myModalFun('发票编号不能为空，请输入！');
					return
				}
				if (that.handle_date == '') {
					uni.$myModalFun('开票日期不能为空，请选择！');
					return
				}
				
				console.log('dddd');
				
				let req = {
					//基本信息
					supplier_id: that.supplier_id,
					supplier_name: that.supplier_name,
					bustype: that.bustype,
					bus_id: that.bus_id,
					bus_type: that.bus_type,
					bus_type_name: that.bus_type_name,
					bus_name: that.bus_name,
					money: that.money,
					handle_date: that.handle_date,
					stages:that.stages,
					remark: that.remark,
					// 开票信息
					invoice_type:that.invoice_type,
					invoice_no:that.invoice_no,
					name_type:that.name_type,
					name:that.name,
					credit_code:that.credit_code,
					bank_name:that.bank_name,
					bank_account:that.bank_account,
					invoice_address:that.invoice_address,
					mobile:that.mobile,
					
					//快递信息
					express_name:that.express_name,
					express_no:that.express_no,
					express_linkman:that.express_linkman,
					express_mobile:that.express_mobile,
					express_address: that.express_address,
					
					sys_user_id:that.owner_user_id
					
				}
				let reqObj = {
					req
				}
				
				let action = 'add';
				
				if (that.pageType == 'update') {
					action = 'update'
					reqObj.req.id = that.xgInfoObj.id;
					reqObj.req.handle_user_id = uni.$userInfo.id;
					uni.showLoading({
						title: '修改中...'
					})
				} else {
					reqObj.req.create_user_id = uni.$userInfo.id;
					reqObj.req.handle_user_id = uni.$userInfo.id;
					uni.showLoading({
						title: '提交中...'
					})
				}
				let reqData = {
					action: action,
					params: reqObj
				}
				console.log(reqObj);
				apiFinInvoiceRece(reqData)
					.then(res => {
							if (action == 'update') {
								uni.showToast({
									title: '收票单修改成功',
									icon: 'none',
									duration: 1000,
									mask: true
								});
								uni.$invoiceReceInfo = reqObj.req;
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							} else {
								uni.showToast({
									title: '收票单新增成功',
									icon: 'none',
									duration: 1000,
									mask: true
								})
								reqObj.req.id = res.data;
								uni.$emit('addHkdItemInListFun')
								setTimeout(() => {
									uni.redirectTo({
										url: './detail?index=0&fromDetail=true&id=' + res.data
									})
								}, 1000)
							}
					})
			},
		// 数据恢复
		setDataFun: function() {
			
			let obj = uni.$invoiceReceInfo
			
			that.xgInfoObj = uni.$invoiceReceInfo
			
			console.log(obj);
			
			//基本信息
			that.supplier_id = obj.supplier_id,
			that.supplier_name = obj.supplier_name
			that.bus_id = obj.bus_id
			that.bus_type = obj.bus_type
			that.bus_type_name = obj.bus_info ? obj.bus_info.type : ''
			that.bus_name = obj.bus_info ? obj.bus_info.name : ''
			
			that.stages = obj.stages
			that.money = obj.money
			that.handle_date = obj.handle_date
			that.remark = obj.remark
			
			//发票信息
			that.invoice_type=obj.invoice_type
			that.invoice_no=obj.invoice_no
			that.name_type=obj.name_type
			that.name=obj.name
			that.credit_code=obj.credit_code
			that.bank_name=obj.bank_name
			that.bank_account=obj.bank_account
			that.invoice_address=obj.invoice_address
			that.mobile=obj.mobile
			//快递信息
			that.express_name=obj.express_name
			that.express_no=obj.express_no
			that.express_linkman=obj.express_linkman
			that.express_mobile=obj.express_mobile
			that.express_address=obj.express_address
			
		},
			//获得字典
			getCstDict:function(){
				//载入字典
				let reqData = {
					action: 'get_list',
					params: {}
				}
				apiCstDict(reqData)
					.then(res => {
						let dictArr = res.data;
						let newArr=[];
						for(var key in dictArr){
							let rowData=[];
							for (var i = 0; i < dictArr[key].length; i++) {
								rowData.push({
									label: dictArr[key][i].name,
									value:dictArr[key][i].id
								})
							}
							newArr[key]=rowData;
						}
						that.cstDict=newArr;
					});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 180rpx;
	}
</style>
